<!--
File Created: 2018-02-06 11:44
Author: xxq (you@you.you)
__________________________________________________
Last Modified: 2018-02-08 10:53:10
Modified By: xxq (you@you.you>)
__________________________________________________
Copyright - 2018 xnb, xnb
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}	
    /*头部底部固定，中间内容可滚动布局 start*/	
        header{
            height: 8vh;
            background:lightcoral;
        }
        main{
            position: absolute;
            top: 0;
            bottom: 8vh;
            left: 0;
            right: 0;
            background: #ccc;
            overflow-y:auto; /*内容超出高度，则出现滚动条*/
        }
        footer{
            position: absolute;
            bottom: 0;
            width:100% ;
            height: 8vh;
            background:lightcoral;
        }
    /* end*/			
        li{
            height: 10vh;
            font:20px/10vh "微软雅黑";	/*line-height也可设置rem居中*/
            color: #fff;
            border-bottom: 1px solid;			
        }
    </style>
</head>
<body>
    <header>测试绝对定位，页面底部输入框</header>
    <main>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>
                <input type="number" id="btn">
            </li>
        </ul>
    </main>
    <footer>

            <input type="search" id="test">
    </footer>
</body>
</html>
<script src="https://unpkg.com/vconsole@latest"></script>
<script>
    var vConsole = new VConsole();
    console.log(window.innerHeight)

    // document.querySelector('#test').addEventListener('focus', function() {
    //     console.log('弹键盘' ,window.innerHeight)
    // })
    window.onresize = function(){
        console.log('弹键盘' ,window.innerHeight)
    }
</script>